<template>
  <div>
    <div v-if="policyCenterDialogVisible" class="mod-user">
      <!-- 资质项页面 -->

      <div class="div-formA">
        <el-form class="policyForm">
          <el-row>
            <el-col :span="6">
              <el-form-item class="formItem" label="资质项">
                <el-input
                  :clearable="true"
                  class="inputcss"
                  v-model="conditions.qualiName"
                  placeholder="请输名称查询"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="formItem" label="资质等级">
                <el-select
                  class="selectA"
                  v-model="conditions.gradeTag"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in levels"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item class="formItem">
                <!-- <el-input :clearable="true" class="inputcss" v-model="input" placeholder="请输名称查询"></el-input> -->
              </el-form-item>
            </el-col>
            <el-col class="el-colA" :span="3">
              <el-form-item class="formItem">
                <el-button @click="clickGetData()">重置</el-button>
                <el-button type="primary" @click="clickInquire()"
                  >查询</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div class="div-centerE">
        <div class="ziyezizhi">
          <div class="zizhi-a"></div>

          <div v-if="conditions.matchFlag == 0" class="zizhi-b">企业证书资质查询</div>
          <div v-if="conditions.matchFlag == 1" class="zizhi-b">已匹配资质证书</div>


          <div class="button-q">
            <el-button
              v-if="conditions.matchFlag == 0"
              class="div-buttonItemb"
              size="mini"
              type="primary"
              plain
              icon="el-icon-upload2"
              @click="clickInquireAAA()"
              >一键查询匹配资质</el-button>

              <el-button
              v-if="conditions.matchFlag == 1"
              class="div-buttonItemb"
              size="mini"
              type="primary"
              plain
              icon="el-icon-upload2"
              @click="clickInquireBBB()"
              >返回上级</el-button>
          </div>
        </div>

        <div class="div-tab">
          <el-tabs class="tabs-s" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="总承包" name="first"> </el-tab-pane>
            <el-tab-pane label="专业承包" name="second"> </el-tab-pane>
          </el-tabs>
        </div>

        <el-table
          class="table-eee"
          :data="tableData"
          :max-height="tableHeight"
          style="width: 100%; margin-bottom: 20px"
          row-key="id"
          :header-cell-style="{ background: '#F5F7FA', height: '54px' }"
        >
          <el-table-column
            prop="qualiName"
            label="资质项"
            align="center"
            width="300"
          >
          </el-table-column>
          <el-table-column
            prop="gradeTag"
            label="资质等级"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.gradeTag == 0">特级</span>
              <span v-if="scope.row.gradeTag == 1">一级</span>
              <span v-if="scope.row.gradeTag == 2">二级</span>
              <span v-if="scope.row.gradeTag == 3">三级</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="needCert"
            label="所需证书"
            align="center"
            :show-overflow-tooltip="true"
            min-width="350"
          >
          </el-table-column>
          <el-table-column label="操作" align="center" width="200">
            <template slot-scope="scope">
              <el-button
                @click="qualificationMatching(scope.row)"
                type="text"
                size="small"
                >资质匹配</el-button>
              <el-button
                @click="handleClickModification(scope.row.id)"
                type="text"
                size="small"
                >查看</el-button>
              <el-button
                @click="handleClickDelete(scope.row)"
                type="text"
                size="small"
                >资质标准</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          background
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageNum"
          :page-sizes="[20, 30, 50, 200]"
          :page-size="pageSize"
          :total="totalCount"
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </div>

    <qualificationa-mod
      :dataListEdit="dataListEdit"
      v-else
    ></qualificationa-mod>

    <el-dialog
      :title="articleData.title"
      :visible.sync="centerDialogVisibleEdit"
      width="70%"
    >
      <span>
        <!-- 表单 -->
        <div class="ql-editor" v-html="this.articleData.content"></div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="centerDialogVisibleEdit = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
<!-- 企业证书资质匹配结果 -->
    <el-dialog
      class="dialog-pipei"
      title="企业证书资质匹配结果"
      :visible.sync="matchingDialogVisible"
      width="1200px"
    >
      <span>
        <div class="tishi">
        <div class="tishi-a">
          <i class="el-icon-warning i-warning"></i>
          <div class="text-a">资质匹配仅能匹配相应类别的证书，具体证书信息请留意右侧</div>
          <div class="text-b">备注</div>
          <div class="text-c">信息!</div>
        </div>
        </div>

        <div class="div-pipei">
          <div v-if="tabDataObj.resultTag" class="pipei-jieguo">
            <i class="el-icon-success success-a"></i>
            <div class="pipei-text">匹配成功</div>
          </div>

          <div v-if="!tabDataObj.resultTag" class="pipei-jieguo">
            <i class="el-icon-error error-a"></i>
            <div class="pipei-text">匹配失败</div>
          </div>
        </div>

      <div class="tab-a">
      <el-table
      :data="tabDataObj.condMatchResultList"
      style="width: 100%"
      :header-cell-style="{background:'#F5F7FA',color:'#000000'}"
      >
      <el-table-column
        type="index"
        label="序列"
        width="80"
        align="center">
      </el-table-column>
      <el-table-column
        prop="needCertDetail"
        label="所需证书"
        min-width="180"
        show-overflow-tooltip
        align="center">
      </el-table-column>
      <el-table-column
        prop="handleCertDetail"
        label="已有证书"
        min-width="180"
        align="center">
        <template slot-scope="scope">
          <span style="color:#6E92E9" v-if="scope.row.resultTag">{{scope.row.handleCertDetail}}</span>
          <span style="color:#E96E6E" v-if="!scope.row.resultTag">{{scope.row.handleCertDetail}}</span>

        </template>
      </el-table-column>
        <el-table-column
        prop="certStatus"
        label="当前证书状态"
        min-width="180"
        show-overflow-tooltip
        align="center">
      </el-table-column>
        <el-table-column
        prop="explains"
        label="备注"
        min-width="180"
        show-overflow-tooltip
        align="center">
      </el-table-column>
    </el-table>
        </div>
        <!-- 表单 -->
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="matchingDialogVisible = false"
          >关  闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Vue from "vue";
import QualificationaMod from "./qualificationa-mod.vue";
export default {
  data() {
    return {
      isEdit: false,
      tableHeight: 0,
      activeName: "first",
      policyCenterDialogVisible: true,
      centerDialogVisibleEdit: false,
      matchingDialogVisible:false,
      ruleForm: {
        id: 0,
        name: "",
        typeCode: "",
        type: 2,
        path: "",
        statusFlag: 0,
        orderNum: 0,
      },
      tableList:[],
      articleData: {
        title: "",
        content: "",
      },
      conditions: {
        typeTag: 1,
        qualiName: "",
        gradeTag: "",
        matchFlag:0
      },
      inOrder: "",
      orderBy: "",

      tableData: [],

      options: [],
      levels: [
        {
          name: "特级",
          code: 0,
        },
        {
          name: "一级",
          code: 1,
        },
        {
          name: "二级",
          code: 2,
        },
        {
          name: "三级",
          code: 3,
        },
      ],

      optionsA: [],
      tabDataObj:{},
      input: "",
      pageNum: 1,
      // 每页条数
      pageSize: 20,
      totalCount: 0,
      // isPics: true,
    };
  },
  components: {
    QualificationaMod,
  },
  created() {
    this.getPolicyList();
    this.adjustTableHeight();
    //   this.getName()
  },
  watch: {
    articleData: {
      deep: true,
      handler(val) {
        // console.log(val)
        if (val.content) {
          var gt = new RegExp("&gt;", "g");
          var lt = new RegExp("&lt;", "g");
          val.content = val.content.replace(gt, ">");
          val.content = val.content.replace(lt, "<");
        }
      },
    },
  },
  methods: {

    qualificationMatching(row){
    this.matchingDialogVisible = true

    this.$http({
        url: this.$http.adornUrl(`/sys/quali/match/` + row.id),
        method: "get",
      }).then(({ data }) => {
        if (data.code === 0) {
          this.tabDataObj = data.data
        } else {
          this.$message.error(data.msg);
        }
      });
    // /sys/quali/match/
    },
    // 一键查询
    clickInquireAAA() {
      this.conditions.matchFlag = 1
      this.getPolicyList()
    },
    clickInquireBBB(){
      this.conditions.matchFlag = 0
      this.getPolicyList()
    },
    adjustTableHeight() {
      this.$nextTick(() => {
        this.tableHeight = window.innerHeight - 340;
      });
    },
    addOrUpdateHandle() {
      this.policyCenterDialogVisible = false;
      this.isEdit = false;
    },
    clickBacks() {
      this.policyCenterDialogVisible = true;
    },
    handleChange() {
      console.log(123);
    },
    handleClick(tab, event) {
      // console.log(tab, event);

      if (this.activeName == "first") {
        this.conditions.typeTag = 1;
        this.getPolicyList();
      }
      if (this.activeName == "second") {
        this.conditions.typeTag = 2;
        this.getPolicyList();
      }
    },
    clickFalseLink() {
      this.$refs.ruleForm.resetFields();
    },
    // 重置
    clickGetData() {
      this.conditions.qualiName = ""
      this.conditions.gradeTag = ""
      this.getPolicyList();
    },
    // 查询
    clickInquire() {
      this.getPolicyList();
    },
    //新增的确定

    // 获取数据
    getPolicyList() {
      this.$http({
        url: this.$http.adornUrl(`/sys/quali/show/paging`),
        method: "post",
        data: this.$http.adornData({
          conditions: this.conditions,
          inOrder: "",
          orderBy: "",
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        }),
      }).then(({ data }) => {
        if (data.code === 0) {
          this.tableData = data.data.records;
          this.totalCount = data.data.total;
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    // 资质标准
    handleClickDelete(row) {
      console.log(row);
      this.articleData.title = row.qualiName;
      this.articleData.content = row.articleContent;
      this.centerDialogVisibleEdit = true;
    },
    /* 修改 */
    handleClickModification(id) {
      this.$http({
        url: this.$http.adornUrl(`/sys/quali/toEdit/` + id),
        method: "get",
      }).then(({ data }) => {
        if (data.code === 0) {
          this.dataListEdit = data.data;
          this.policyCenterDialogVisible = false;
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    resetForm() {
      this.ruleForm = {
        id: 0,
        name: "",
        typeCode: "",
        type: 2,
        path: "",
        statusFlag: 0,
        orderNum: 0,
      };
    },
    sizeChangeHandle(val) {
      this.pageNum = 1;
      this.pageSize = val;
      this.getPolicyList();
    },
    currentChangeHandle(val) {
      this.pageNum = val;
      this.getPolicyList();
    },
  },
};
</script>
<style scoped lang="scss">
/deep/.dialog-pipei{
.el-dialog__body{
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
}
.tab-a{
  width: 100%;
}
.success-a{
  color: #6EE976;
  font-size: 32px;
  float: left;
}
.error-a{
  color: #E96E6E;
  font-size: 32px;
  float: left;
}
.pipei-text{
  margin-top: 2px;
  font-size: 24px;
  color: #303133;
  float: left;
  margin-left: 10px;
  font-weight: 500;
}
.div-pipei{
  width: 100%;
  height: 66px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pipei-jieguo{
/*   width: 110px; */
  height: 32px;
}
.i-warning{
  color: #E6A23C;
  float: left;
}
.text-a{
  float: left;
  margin-left: 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
  margin-top: 2px;
  color: #E6A23C;
}
.text-b{
  float: left;
  font-size: 14px;
  font-weight: 600;
  font-family: PingFang SC;
  margin-left: 8px;
  margin-right: 8px;
  color: #E96E6E;
}
.text-c{
  float: left;
  font-size: 12px;
  display: flex;
  align-items: center;
  margin-top: 2px;
  color: #E6A23C;
}
.tishi{
  width: 100%;
  height: 40px;
  margin-top: 8px;
  padding-left: 47px;
  padding-right: 47px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tishi-a{
  width: 100%;
  height: 40px;
  background-color: #FDF5E6;
  display: flex;
  align-items: center;
  padding-left: 12px;
  box-sizing: border-box;
}
.inputcss {
  width: 300px;
  margin-right: 5px;
}
.policyForm {
  width: 100%;
}
.mod-user {
  padding: 15px;
}

/deep/.el-dialog__wrapper {
  .el-dialog {
    .el-dialog__header {
      font-weight: bold;
      padding-bottom: 20px !important;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }
  }
  /deep/.div-buttonItemb {
    float: right;
    font-size: 14px;
    i {
      font-size: 14px;
    }
  }
}
.formA {
  padding-right: 100px !important;
}
.selectA {
  width: 100% !important;
}
.div-tab {
  width: 100%;
  height: 40px;
  background-color: #ffffff;
}
/deep/.tabs-s
  .el-tabs__header
  .el-tabs__nav-wrap
  .el-tabs__nav-scroll
  .el-tabs__nav
  .el-tabs__item {
  border-right: none !important;
  border-left: none !important;
  background-color: #ffffff !important;
}
/deep/.tabs-s .el-tabs__active-bar {
  height: 2px !important;
}
.table-eee {
  margin-top: 10px;
}
.formItem {
  width: 100%;
  height: 100%;
  margin-bottom: 0px !important;
  margin-left: 30px;
}
.div-formA {
  width: 100%;
  margin-top: 10px;
  height: 64px;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  margin-bottom: 15px;
}
.el-colA {
  float: right !important;
}
.div-centerE {
  padding: 15px;
  background-color: #ffffff;
}
.ziyezizhi {
  width: 100%;
  height: 45px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  position: relative;
}
.zizhi-a {
  width: 5px;
  height: 18px;
  float: left;
  background-color: #6e92e9;
}
.zizhi-b {
  float: left;
  margin-left: 8px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #000000;
}
.button-q {
  /*   float: right;
  height: 32px;
  width: 50px;
  background: #6E92E9; */
  position: absolute;
  right: 0px;
  bottom: 0px;
}
.selectA {
  width: 200px !important;
}
</style>
